<!--  -->
<template>
<div class="container">
    <!-- 左边盒子 -->
    <div class="leftBox">
        <div class="topBox">
            <el-col :span="11" style="margin-right: 10px">
                <el-input v-model="search" size="mini"></el-input>
            </el-col>
            <el-button type="primary" @click="searchFun" size="mini">搜索</el-button>
            <el-button type="success" size="mini" @click="getarea">待分配床位</el-button>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="床位名称" align="center"></el-table-column>
            <el-table-column prop="location" label="地址" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" show-overflow-tooltip align="center"></el-table-column>
        </el-table>
    </div>
    <!-- 右边盒子 -->
    <div class="rightBox">
        <el-form ref="form" :model="form">
            <el-form-item label="区域名称" prop="areaName" style="align-items: center">
                <el-col :span="11">
                    <el-input v-model="intervalList.name" />
                </el-col>
            </el-form-item>
        </el-form>
        <div class="app-container">
            <div class="patrol">
                <div>巡逻间隔：</div>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addColumn">新增</el-button>
            </div>
            <el-table :data="intervalList.tours">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column label="开始巡逻时间" width="150" :show-overflow-tooltip="true" prop="beginTime">
                    <template slot-scope="scope">
                        <el-col :span="30">
                            <el-time-picker placeholder="选择时间" v-model="scope.row.beginTime" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
                        </el-col>
                    </template>
                </el-table-column>
                <el-table-column label="结束巡逻时间" width="150" :show-overflow-tooltip="true" prop="endTime">
                    <template slot-scope="scope">
                        <el-col :span="30">
                            <el-time-picker placeholder="选择时间" v-model="scope.row.endTime" style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
                        </el-col>
                    </template>
                </el-table-column>

                <el-table-column label="间隔时间" prop="intervalTime" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input placeholder="" v-model="scope.row.intervalTime"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteRow(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="listTop" style="margin-top: 20px">
            <div>已关联床位</div>
        </div>
        <el-tag v-for="(item, index) in intervalList.beds" :key="index" closable :disable-transitions="false" @close="handleClose(index)">
            {{item.name}}
        </el-tag>
        <div class="submitBox">
            <el-button type="primary" size="mini" @click="Addarea">确认修改</el-button>
        </div>
    </div>
</div>
</template>

<script>
import {
    addArea,
    getDistribution,
    getarea,
    updatArea,
    getDistrict,
} from "../../../../api/user.js";
export default {
    components: {},
    data() {
        return {
            search: "", //搜索内容
            form: {
                // areaName: "",
            },
            tableData: [],
            checkList: ["选中且禁用", "复选框 A"],
            intervalList: [], // 通过id获取的区域
            checkListData: [], //关联床位
            awarry: [],
            timeList: [], // 时间列表
        };
    },
    computed: {},
    watch: {},
    created() {

        this.id = this.$route.query.id;
        console.log(this.id);
        this.putArae();
    },
    mounted() {},
    methods: {
        //时间编辑
        addColumn() {
            let aa = {
                beginTime: '',
                endTime: '',
                intervalTime: '',

            };
            this.intervalList.tours.push(aa);
        },
        deleteRow(index) {
            console.log(this.intervalList);
            this.intervalList.tours.splice(index, 1);
        },
        searchFun() {
            console.log(this.search);
        },
        addList() {},
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //点击添加到关联床位
        handleSelectionChange(val) {
            this.multipleSelection = val;
            if (val) {
                var arr = [];
                this.checkListData = arr.concat(val); //选中添加到数组里
                console.log(this.checkListData);
            } else {
                this.intervalList.beds.splice(this.intervalList.beds.indexOf(val), 1); //取消

            }
        },
        handleSelection(val) {
            this.multipleSelections = val;
        },
        //获取未分配的床位
        getarea() {
            getDistribution()
                .then((res) => {
                    this.tableData = res.data.beds;
                    // console.log(res);
                })
                .catch((err) => {
                    // console.log(err);
                });
        },
        //删除已选择床位
        handleClose(index) {
            console.log(index);
            this.intervalList.beds.splice(this.intervalList.beds.indexOf(index), 1);
            // this.intervalList.beds.map((item) => {
            //     this.awarry.push(item.id)
            //     console.log(this.awarry)
            // })
            console.log(this.intervalList.beds);
        },
        //修改区域
        Addarea() {
            this.intervalList.beds.map((item) => {
                this.awarry.push(item.id);
                console.log(this.awarry);
            });
            updatArea(
                    this.intervalList.id,
                    this.intervalList.name,
                    this.intervalList.tours,
                    this.awarry
                )
                .then((res) => {
                    this.$message({
                        type: "success",
                        message: "修改成功!",
                    });
                    this.$router.push({
                        name: "areaSet",
                    });
                })
                .catch((err) => {
                    this.$message("修改失败");
                });
        },
        //更新区域
        putArae() {
            getDistrict(this.id)
                .then((res) => {
                    console.log(res);
                    this.intervalList = res.data.region;
                    // console.log(this.putList);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .leftBox {
        width: 48%;
    }

    .rightBox {
        width: 48%;

        .listTop {
            font-size: 16px;
            color: #666;
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
        }

        .submitBox {
            margin-top: 23px;
            display: flex;
            justify-content: center;
        }
    }

    .patrol {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}
</style>
